<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部合同</title>
    <link rel="stylesheet" href="/static/crm/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/crm/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        .layui-table th {
            font-weight: bold;
            color: #333333;
            text-align: center;
        }

        .layui-table {
            text-align: center;
        }
    </style>
</head>

<body>

    <script src="/static/crm/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">订单编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="number" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">订单名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">订单名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">跟进人</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">订单状态：</label>
                                <div class="layui-input-inline">
                                    <select id="demoReload" name="status" lay-verify="">
                                        <option value=""></option>
                                        <option value="0">交易中</option>
                                        <option value="1">交易成功</option>
                                        <option value="2">回款成功</option>
                                    </select>
                                </div>
                            </div>
                            <!-- <div class="layui-inline">
                                <label class="layui-form-label">合同金额</label>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="money" placeholder="￥" autocomplete="off"
                                        class="layui-input">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="money" placeholder="￥" autocomplete="off"
                                        class="layui-input">
                                </div> -->
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                                    class="layui-icon"></i> 搜 索</button>
                        </div>
                </div>
                </form>
        </div>
        </fieldset>
        <script type="text/html" id="toolbarDemo">

                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" style="background-color: #393D49;" lay-event="refresh"><i class="fa fa-refresh layui-anim-rotate"></i></button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled " id="stamp"> <i class="layui-icon  layui-icon-print"></i>  打印 </button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i class="layui-icon  layui-icon-edit layui-icon-addition"></i> 添加 </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="recycle">回收站 </button>
                </div>
            </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-sm layui-btn-xs " lay-event="proceeds">收款</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit" ><i class="layui-icon  layui-icon-edit"></i></a>
                <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="delete" ><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>

    </div>
    </div>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            let userTable = table.render({
                elem: '#currentTableId',
                url: 'index',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    { type: "checkbox", width: 50, fixed: 'left' },
                    { type: 'numbers', title: '序号', width: 80, sort: true ,fixed: 'left'},
                    { field: 'number', minWidth: '190', title: '订单编号' },
                    { field: 'name', minWidth: '110', title: '订单名称' },
                    { field: 'ourclients', while: '80', title: '客户',templet:function(d){ return d.ourclients.name}},
                    { field: 'money', minWidth: '110', title: '订单金额', sort: true },
                    { field: 'deposit', minWidth: '110', title: '回款金额', sort: true },
                    { field: 'remark', while: '80', title: '备注', },
                    { field: 'order_time', minWidth: '110', title: '下单时间', sort: true },
                    { field: 'start_time', minWidth: '110', title: '开始时间', sort: true },
                    { field: 'end_time', minWidth: '110', title: '过期时间', sort: true },
                    { field: 'sale', Width: '80', title: '创建人', templet:function(d){ return d.sale.account}},
                    { field: 'principal', Width: '80', title: '跟进人', templet:function(d){ return d.principal.account}},
                    { field: 'status', Width: '80', title: '状态', sort: true },
                    { title: '操作', minWidth: 260, toolbar: '#currentTableBar', align: "center", fixed: 'right' }
                ]],
                limits: [5, 10, 20, 25, 50, 100],
                limit: 5,
                page: true,
                skin: 'line',
                parseData: function (res) {
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return { 'code': res.code, 'msg': res.msg, 'count': res.total, 'data': result };
                }
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var result = data.field;
                table.reload('currentTableId', {
                    where: {
                        searchParams: result        //where里面是传递到后台的值，
                    },
                    page: {
                        curr: 1//这里不用改，意思是从第一页开始重载表格
                    },
                }, 'data');
                return false;
            });
            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    var index = layer.open({
                        title: '订单添加',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: './add.html',
                    });

                } else if (obj.event === 'recycle') {  // 回收站
                    var index = layer.open({
                        title: '回收站',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: './recycle.html',

                    })
                }else if (obj.event === 'refresh') {  // 监听刷新操作
                    table.reload('currentTableId', {
                        page: { curr: 1 }
                    });
                }
            });
            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                var _id = data['id'];
                if (obj.event === 'edit') {

                    var index = layer.open({
                        title: '编辑订单',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: './edit.html?id=' + _id,
                    });
                } else if (obj.event === 'delete') { //放入回收站
                    layer.confirm('真的删除行么', function (index) {
                        $.get('delete?id=' + _id, function (res) {
                            obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                            layer.msg(res.errmsg);
                            if (res.errcode == 1) {
                                obj.del();
                                layer.close(index);
                                table.reload('currentTableId', {
                                    scrollPos: 'fixed'  
                                });
                            }
                        })
                    });
                }else if(obj.event === 'proceeds'){   //收款
                    var index = layer.open({
                        title: '收款',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/crm/contract.proceeds/add',
                    })
                }
            });

            $(".layui-table-tool-self .layui-inline").eq(2).hide();//不需要自带的打印功能


            //     //刷新功能
            $('.layui-anim').on('click', function (obj) {
                var othis = $(this), anim = othis.data('anim');
                othis.removeClass(anim);
                setTimeout(function () {
                    othis.addClass(anim);
                });
            });
            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                if (obj.checked == true) {
                    $("#stamp").removeClass("layui-btn-disabled")

                } else {
                    $("#stamp").addClass("layui-btn-disabled")
                }
                var data = obj.data;
                console.log(data);
                $("#stamp").on('click', function (obj) {     
                    var v = document.createElement("div");
                    var f = [`<style>
    td {
        padding: 10px 5px;
    }

    p {
        margin: 0 0 0px;
    }
    table{
        border-spacing: 1px;
    }
    .tdborder{
        border:1px solid #000000;
       align-items:center;line-height:16px;
    }
    .tdtext{
        text-align:center;
        vertical-align:middle;
    }
    .title{
        padding: 0px;
        font-weight: bold;
        text-align: center;
    }
    .pcontent{
        padding: 0px;
        text-align: center;
    }
</style>
<table border="0" cellspacing="0" width="400" style="table-layout:fixed;word-break:break-all; word-wrap:break-all;"  >
    <tbody>
    <tr>
        <td width="743" valign="center" colspan="8" >
            <p  style="text-align:center;vertical-align:middle;">
            <b><span style="color:#0070C0;font-size:18pt;">订 &nbsp;&nbsp;&nbsp;单</span></b>
                <br/>
            <b><span style="color:#0070C0;font-size:16pt;"></span></b>
            </p>
        </td>

    </tr>

    <tr>
        <td valign="center" colspan="5" >
            <p  style="vertical-align:middle;">
                <b>&nbsp;订单编号：`+ data.number + ` </b>
            </p>
        </td>
        <td >
            <p  style="vertical-align:middle;">
            <b></b>
            </p>
        </td>
        <td colspan="2" >
            <p  style="vertical-align:middle;">
                <b>下单日期: `+ data.order_time + `</b>
            </p>
        </td>

    </tr>

    <tr>
        <td class="tdborder">
            <p class="tdtext" >
                <b>客户名称</b>
            </p>
        </td>
        <td valign="center" colspan="3" class="tdborder">
            <p class="tdtext" >
                `+ data.ourclients.name + `
            </p>
        </td>
        <td valign="center" class="tdborder">
            <p class="tdtext">
                <b>联系人</b>

            </p>
        </td>
        <td   colspan="3" class="tdborder">
            <p class="tdtext" >
                `+ data.principal.admin + `
            </p>
        </td>

    </tr>

    <tr>
        <td class="tdborder">
            <p class="tdtext">
                <b>项目经理</b>
            </p>
        </td>
        <td colspan="3" class="tdborder" >
            <p class="tdtext" >

            </p>
        </td>
        <td class="tdborder">
            <p class="tdtext" >
            <b>签单人</b>
            </p>
        </td>
        <td  colspan="3" class="tdborder">
            <p class="tdtext" >

            </p>
        </td>


    </tr>


    <tr>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                <b>开始日期</b></p>
        </td>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                `+ data.order_time + `
            </p>
        </td>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                <b>结束日期</b></p>
        </td>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
               `+ data.order_time + ` 
            </p>
        </td>
    </tr>


    <tr>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                <b>合同金额</b></p>
        </td>
        <td  colspan="2" class="tdborder">
            <b><span style="color:#0070C0;font-size:16pt;"></span></b>

        </td>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                <b>已经收款</b></p>
        </td>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
               
            </p>
        </td>
    </tr>
    <tr>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                <b>备注</b></p>
        </td>
        <td  colspan="6" class="tdborder">
            <p class="tdtext" >
               `+ data.remark + ` 
            </p>
        </td>

    </tr>


    <tr>
        <td valign="center" rowspan="" class="tdborder" >
            <p >
                <b>
                    <div style="width: 20px;margin-left: 15px;">购买产品或服务</div>
                </b>
            </p>
        </td>
        <td  class="tdborder title">

            <b>名称</b>
        </td>
        <td class="tdborder title" >
            <b>编码</b>
        </td>
        <td class="tdborder title" >
            <b>数量</b>
        </td>
        <td class="tdborder title" >
            <b>单位</b>
        </td>
        <td  class="tdborder title">
            <b>单价</b>
            </p>
        </td>
        <td class="tdborder title">
            <b>小计</b>
        </td>
        <td class="tdborder title">
            <b>备注</b>
        </td>
        </td>
    </tr>

    <tr>
        <td  class="tdborder" >
            <p>
            <b></b>
            </p>
        </td>
        <td  class="tdborder pcontent">
           
        </td>
        <td  class="tdborder pcontent">
           
        </td>
        <td  class="tdborder pcontent">
            
        </td>
        <td  class="tdborder pcontent">
            
        </td>
        <td  class="tdborder pcontent">
            
        </td>
        <td  class="tdborder pcontent">
              
        </td>
    </tr>
    

    <tr>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                <b>产品金额</b></p>
        </td>
        <td  colspan="2" class="tdborder">
            <b><span style=""></span></b>

        </td>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                <b>折扣</b></p>
        </td>
        <td  colspan="2" class="tdborder">
            <p class="tdtext" >
                
            </p>
        </td>
    </tr>



    <tr>
        <td colspan="4" >
            <p  style="text-align:left;vertical-align:middle;">


                <b><span style="font-size:14pt;">甲方</span></b>
                <br/>
                <br/>
                <b><span >盖章签名</span></b>
                <br/>
                <br/>
                <b><span >日期</span></b>
            </p>
        </td>

        <td colspan="4" >
            <p  style="text-align:left;vertical-align:middle;">


                <b><span style="font-size:14pt;">乙方</span></b>
                <br/>
                <br/>
                <b><span >盖章签名</span></b>
                <br/>
                <br/>
                <b><span >日期</span></b>
            </p>
        </td>
    </tr>

    </tbody>

</table>
<br/>
<br/>`,
                        "<br/>"].join("");
                    var h = window.open("Print_window", "_blank");
                    h.document.write(f + $(v).prop("outerHTML"));
                    h.document.close();
                    h.print();
                    h.close();

                })
            });
        });



    </script>


</body>

</html>